<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <div class="host-body">

        <div class="d-flex jc-center">
          <img class="header_img" src="@/assets/img/header_bg.png" alt="">
        </div>
        <div class="time_box">
          <timeBox></timeBox>
        </div>
        <div class="time_select">
          <div @click="timeSelectFn(1)" class="time_select_item" :class="[timeSelect.mode === 1 ? 'select':'']">
            <img src="@/assets/img/time_btn_bg.png" style="transform: rotate(180deg)" alt="">
            前24小时
          </div>
          <div @click="timeSelectFn(2)" class="time_select_item" :class="[timeSelect.mode === 2 ? 'select':'']">
            <img src="@/assets/img/time_btn_bg.png" alt="">
            <VueDatepickerUi
                inputClass="datePicker"
                v-if="timeSelect.mode === 2"
                v-model="timeSelect.timeRange" lang="zh-CN"
                placeholder="自选时间段"
                position="right"
                :showClearButton="true"
                @change="timeChange"
                :range="true"/>
            {{ timeSelect.mode === 2 ? '' : '自选时间段' }}
          </div>
        </div>
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else style="display: flex">
          <!--第一列-->
          <template v-if="select === 1">
            <div class="flex_j_center transition pt38" style="justify-content: space-between;">
              <div class="dv-dec-10">
                <centerLeft1 :apiData="left1"/>
              </div>
              <div class="dv-dec-10 mt-20">
                <centerLeft2 :apiData="left2"/>
              </div>
            </div>
          </template>
          <template v-else>
            <div class=" transition pt38" style="justify-content: space-between;">
              <div class="dv-dec-10">
                <centerLeft1_view1 :timeMode="timeSelect" :mapType="mapType" :apiData="left1_2"/>
              </div>
              <div class="dv-dec-10 mt-20">
                <centerLeft2_view1 :apiData="left2_2" :timeMode="timeSelect" :mapType="mapType"/>
              </div>
              <div class="dv-dec-10 mt-20">
                <centerLeft3_view1 :apiData="left3_2" :timeMode="timeSelect" :mapType="mapType"/>
              </div>
            </div>
          </template>
          <!--第二列-->
          <div class="flex_j_center dv-dec-11 transition">
            <centerTop :select="select" @onClick="onClick"/>
            <centerTop2 :apiData="center1" v-if="select === 1"/>
            <centerTopKpi @kpiSelect="kpiSelect" :itemKey="itemKey" :apiData="center1_2" v-else
                          :select="select"></centerTopKpi>
            <center :apiData="center2" :mapType="mapType" :select="select" :timeMode="timeSelect"
                    @mapTypeChange="mapTypeChange"
                    @regionClick="regionClick"/>
            <centerBottom :apiData="center3" v-if="select === 1" :is-scroll="mapType === 2"/>
          </div>
          <!--第三列-->
          <!--总体-->
          <template v-if="select === 1">
            <div class="thirdColumn pt38" style="justify-content: space-between">
              <div class=" dv-dec-10">
                <centerRight1 :apiData="right1"/>
              </div>
              <div class=" dv-dec-10 mt-20">
                <centerRight2 :apiData="right2"/>
              </div>
              <div class=" dv-dec-10 mt-20">
                <centerRight3 :apiData="right3"/>
              </div>
            </div>
          </template>
          <!--view1-->
          <template v-else>
            <div class="thirdColumn pt38" style="justify-content: space-between">
              <div class=" dv-dec-10">
                <centerRight1_view1 :timeMode="timeSelect" :apiData="right1_2" :mapType="mapType"/>
              </div>
              <div class=" dv-dec-10 mt-20">
                <centerRight2_view1 :timeMode="timeSelect" :apiData="right2_2" :mapType="mapType"/>
              </div>
              <div v-if="timeSelect.mode === 2 && timeSelect.endTime" class=" dv-dec-10 mt-20">
                <centerRight3_view1 :apiData="right3_2"/>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from '@/utils/drawMixin'
import { dateFormat } from '@/utils/index.js'
import centerLeft1 from './centerLeft1'
import centerLeft2 from './centerLeft2'
import centerRight1 from './centerRight1'
import centerRight2 from './centerRight2'
import centerRight3 from './centerRight3'
import center from './center'
import centerTop from '@/views/overAll/centerTop.vue'
import centerTop2 from '@/views/overAll/centerTop2.vue'
import centerBottom from '@/views/overAll/centerBottom.vue'
import centerLeft1_view1 from '@/views/view1/centerLeft1.vue'
import centerLeft2_view1 from '@/views/view1/centerLeft2.vue'
import centerLeft3_view1 from '@/views/view1/centerLeft3.vue'
import centerRight1_view1 from '@/views/view1/centerRight1.vue'
import centerRight2_view1 from '@/views/view1/centerRight2.vue'
import centerRight3_view1 from '@/views/view1/centerRight3.vue'
import centerTopKpi from '_c/cneter/centerTopKpi/index.vue'
// import bottomLeft from './bottomLeft'
// main.js file
import 'vue-datepicker-ui/lib/vuedatepickerui.css'
import '../../assets/scss/datePicker.scss'
import VueDatepickerUi from 'vue-datepicker-ui'
import { zongtida, zongtifang, zongtiguan, zongtikong, zongtimap, zongtiother, zongtitotal } from '@/api/all'
import timeBox from '_c/timeBox.vue'
import {
  da24,
  da242,
  da24total,
  da24total2,
  da24zhanqu,
  da24zhanqu2,
  dazhanquAnalyze,
  paichusuo, paichusuo2,
  paichusuoAnalyze,
  zhanquAnalyze,
  zhanquData
} from '@/api/da'
import {
  fang24,
  fang24paichusuo,
  fang24total,
  fang24zhanqu,
  fangmap,
  fangpaichusuo,
  fangpaichusuoAnalyze,
  fangtotal,
  fangzhanqu,
  fangzhanquAnalyze
} from '@/api/fang'
import {
  guan24,
  guan24paichusuo,
  guan24total,
  guan24zhanqu,
  guanmap,
  guanpaichusuo,
  guanpaichusuoAnalyze,
  guantotal,
  guanzhanqu,
  guanzhanquAnalyze
} from '@/api/guan'
import {
  kong24,
  kong24paichusuo,
  kong24total,
  kong24zhanqu,
  kongmap,
  kongpaichusuo,
  kongpaichusuoAnalyze,
  kongtotal,
  kongzhanqu,
  kongzhanquAnalyze
} from '@/api/kong'
import {
  other24,
  other24paichusuo,
  other24total,
  other24zhanqu,
  othermap,
  otherpaichusuo,
  otherpaichusuoAnalyze,
  othertotal,
  otherzhanqu,
  otherzhanquAnalyze
} from '@/api/other'


export default {
  mixins: [drawMixin],
  data() {
    return {
      select: 1,//当前选择的tab页码
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000'],
      mapType: 1,
      timeSelect: {
        mode: 1,
        timeRange: [],
        startTime: null,
        endTime: null,
      },
      areaCode: '',
      itemKey: '',
      left1: {}, //总体左上
      left2: {}, //总体左下
      right1: {}, //总体右上
      right2: {}, //总体右中
      right3: {}, //总体右下
      center1: {},//总体中上
      center2: {},//总体中
      center3: {},//总体中下
      center1_2: {},
      left1_2: {},//战区视图
      left2_2: {}, //左2
      left3_2: {}, //左3
      right1_2: {},
      right2_2: {},
      right3_2: {},
    }
  },
  components: {
    centerLeft1,
    centerLeft2,
    centerRight1,
    centerRight2,
    centerRight3,
    center,
    centerTop,
    centerTop2,
    centerBottom,
    centerLeft1_view1,
    centerLeft2_view1,
    centerLeft3_view1,
    centerRight1_view1,
    centerRight2_view1,
    centerRight3_view1,
    centerTopKpi,
    VueDatepickerUi,
    timeBox
    // bottomLeft,
  },
  created() {
    this.getData()
  },
  mounted() {
    this.cancelLoading()
  },
  beforeDestroy() {
    clearInterval(this.timing)
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    async getData() {
      // 将 select 值与对应异步方法映射
      const actions = {
        1: () => this.select1(),
        2: () => this.select2(),
        3: () => this.select3(),
        4: () => this.select4(),
        5: () => this.select5(),
        6: () => this.select6(),
        // ... 可以按需添加更多映射
      }

      try {
        // 检查映射中是否存在当前 select 对应的函数
        if (actions[this.select]) {
          // 调用对应函数并等待其完成
          await actions[this.select]()
        } else {
          // 如果没有匹配的 select 值，可以选择进行提示或默认处理
          console.warn(`未找到 select=${this.select} 对应的处理函数`)
        }
      } catch (err) {
        console.error('🏷 报错提示', err)
      }
    },
    // 地图类型切换
    async mapTypeChange(v) {
      this.mapType = v
      this.areaCode = ''
      // this.loading = true
      await this.getData()
      // this.loading = false
      /* let query = {
         endTime: this.timeSelect.endTime,
         startTime: this.timeSelect.startTime,
       }
       const res = await zongtimap({...query, mapType: this.mapType})
       this.center2 = res.data*/
    },
    onClick(v) {
      this.select = v
      this.itemKey = ''
      this.getData()
    },
    // 地图点击事件
    regionClick(c) {
      this.areaCode = c
      this.getData()
    },
    async select1() {
      let query = {
        endTime: this.timeSelect.endTime,
        startTime: this.timeSelect.startTime,
        areaCode: this.areaCode,
      }
      const [resA, resB, resC, resD, resE, resF, resG] = await Promise.all([
        zongtida(query), //总体打
        zongtifang(query),//总体防
        zongtiguan(query),//总体管
        zongtikong(query),//总体控
        zongtiother(query),//其他
        zongtitotal(query),//其他
        zongtimap({...query, mapType: this.mapType}),//总体 地图数据
      ])
      this.left1 = resA.data
      this.right1 = resB.data
      this.left2 = resC.data
      this.right2 = resD.data
      this.right3 = resE.data
      this.center1 = resF.data
      this.center2 = resG.data
      this.center3 = resG.data
    },
    async select2() {
      let query = {
        endTime: this.timeSelect.endTime,
        startTime: this.timeSelect.startTime,
        areaCode: this.areaCode,
        itemKey: this.itemKey
      }
      if (this.timeSelect.mode === 1) {
        const [resA, resB, resC, resD] = await Promise.all([
          da24({...query, mapType: this.mapType}),
          da24total(query),
          da24zhanqu(query),
          paichusuo(query),
        ])
        this.center2 = resA.data
        this.center1_2 = resB.data
        this.left1_2 = resC.data
        this.right1_2 = resD.data
        this.right2_2 = resD.data
        this.left2_2 = resC.data
        this.left3_2 = resC.data
      } else if (this.timeSelect.mode === 2 && this.timeSelect.endTime) {
        const [resA, resB, resC, resD, resE, resF, ] = await Promise.all([
          da242({...query, mapType: this.mapType}),
          da24total2(query),
          da24zhanqu2(query),
          paichusuo2(query),
          dazhanquAnalyze(query),
          paichusuoAnalyze(query),
        ])
        this.center2 = resA.data
        this.center1_2 = resB.data
        this.left1_2 = resC.data
        this.left2_2 = resE.data
        this.left3_2 = resC.data
        this.right1_2 = resD.data
        this.right2_2 = resF.data
        this.right3_2 = resD.data
        console.log(this.right2_2, 'this.right3_2')
      }
    },
    //分割方法
    async select3() {
      let query = {
        endTime: this.timeSelect.endTime,
        startTime: this.timeSelect.startTime,
        areaCode: this.areaCode,
        itemKey: this.itemKey

      }
      if (this.timeSelect.mode === 1) {
        const [resA, resB, resC, resD] = await Promise.all([
          fang24({...query, mapType: this.mapType}),
          fang24total(query),
          fang24zhanqu(query),
          fang24paichusuo(query),
        ])
        this.center2 = resA.data
        this.center1_2 = resB.data
        this.left1_2 = resC.data
        this.right1_2 = resD.data
        this.right2_2 = resD.data
        this.left2_2 = resC.data
        this.left3_2 = resC.data
      } else if (this.timeSelect.mode === 2 && this.timeSelect.endTime) {
        const [resA, resB, resC, resD, resE, resF] = await Promise.all([
          fangmap({...query, mapType: this.mapType}),
          fangtotal(query),
          fangzhanqu(query),
          fangpaichusuo(query),
          fangzhanquAnalyze(query),
          fangpaichusuoAnalyze(query),
        ])
        this.center2 = resA.data
        this.center1_2 = resB.data
        this.left1_2 = resC.data
        this.left2_2 = resE.data
        this.left3_2 = resC.data
        this.right1_2 = resD.data
        this.right2_2 = resF.data
        this.right3_2 = resD.data
      }
    },
    async select4() {
      let query = {
        endTime: this.timeSelect.endTime,
        startTime: this.timeSelect.startTime,
        areaCode: this.areaCode,
        itemKey: this.itemKey

      }
      if (this.timeSelect.mode === 1) {
        const [resA, resB, resC, resD] = await Promise.all([
          guan24({...query, mapType: this.mapType}),
          guan24total(query),
          guan24zhanqu(query),
          guan24paichusuo(query),
        ])
        this.center2 = resA.data
        this.center1_2 = resB.data
        this.left1_2 = resC.data
        this.right1_2 = resD.data
        this.right2_2 = resD.data
        this.left2_2 = resC.data
        this.left3_2 = resC.data
      } else if (this.timeSelect.mode === 2 && this.timeSelect.endTime) {
        const [resA, resB, resC, resD, resE, resF] = await Promise.all([
          guanmap({...query, mapType: this.mapType}),
          guantotal(query),
          guanzhanqu(query),
          guanpaichusuo(query),
          guanzhanquAnalyze(query),
          guanpaichusuoAnalyze(query),
        ])
        this.center2 = resA.data
        this.center1_2 = resB.data
        this.left1_2 = resC.data
        this.left2_2 = resE.data
        this.left3_2 = resC.data
        this.right1_2 = resD.data
        this.right2_2 = resF.data
        this.right3_2 = resD.data
      }
    },
    async select5() {
      let query = {
        endTime: this.timeSelect.endTime,
        startTime: this.timeSelect.startTime,
        areaCode: this.areaCode,
        itemKey: this.itemKey

      }
      if (this.timeSelect.mode === 1) {
        const [resA, resB, resC, resD] = await Promise.all([
          kong24({...query, mapType: this.mapType}),
          kong24total(),
          kong24zhanqu(),
          kong24paichusuo(),
        ])
        this.center2 = resA.data
        this.center1_2 = resB.data
        this.left1_2 = resC.data
        this.right1_2 = resD.data
        this.right2_2 = resD.data
        this.left2_2 = resC.data
        this.left3_2 = resC.data
      } else if (this.timeSelect.mode === 2 && this.timeSelect.endTime) {
        const [resA, resB, resC, resD, resE, resF] = await Promise.all([
          kongmap({...query, mapType: this.mapType}),
          kongtotal(query),
          kongzhanqu(query),
          kongpaichusuo(query),
          kongzhanquAnalyze(query),
          kongpaichusuoAnalyze(query),
        ])
        this.center2 = resA.data
        this.center1_2 = resB.data
        this.left1_2 = resC.data
        this.left2_2 = resE.data
        this.left3_2 = resC.data
        this.right1_2 = resD.data
        this.right2_2 = resF.data
        this.right3_2 = resD.data
      }
    },
    select6: async function () {
      let query = {
        endTime: this.timeSelect.endTime,
        startTime: this.timeSelect.startTime,
        areaCode: this.areaCode,
        itemKey: this.itemKey

      }
      if (this.timeSelect.mode === 1) {
        const [resA, resB, resC, resD] = await Promise.all([
          other24({...query, mapType: this.mapType}),
          other24total(query),
          other24zhanqu(query),
          other24paichusuo(query),
        ])
        this.center2 = resA.data
        this.center1_2 = resB.data
        this.left1_2 = resC.data
        this.right1_2 = resD.data
        this.right2_2 = resD.data
        this.left2_2 = resC.data
        this.left3_2 = resC.data
      } else if (this.timeSelect.mode === 2 && this.timeSelect.endTime) {
        const [resA, resB, resC, resD, resE, resF] = await Promise.all([
          othermap({...query, mapType: this.mapType}),
          othertotal(query),
          otherzhanqu(query),
          otherpaichusuo(query),
          otherzhanquAnalyze(query),
          otherpaichusuoAnalyze(query),
        ])
        this.center2 = resA.data
        this.center1_2 = resB.data
        this.left1_2 = resC.data
        this.left2_2 = resE.data
        this.left3_2 = resC.data
        this.right1_2 = resD.data
        this.right2_2 = resF.data
        this.right3_2 = resD.data
      }
    },
    timeChange(v) {
      this.timeSelect.startTime = dateFormat(v[0])
      if (v[1]) {
        this.timeSelect.endTime = dateFormat(v[1])
      }
      if (this.timeSelect.endTime) {
        this.getData()
      }
    },
    timeSelectFn(v) {
      this.timeSelect.mode = v
      if (v === 1) {
        this.timeSelect.startTime = null
        this.timeSelect.endTime = null
        this.timeSelect.timeRange = []
        this.getData()
      }
    },
    kpiSelect(v) {
      this.itemKey = v
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/index.scss';

</style>
